<template>
  <div>
    <ol>
      <li v-for="item in news" :key="item.id">
        <!-- 改成编程式路由 -->
        <a href="javascript:;" @click="goDetail(item.id)">
          {{ item.title }}
        </a>
      </li>
    </ol>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      news: [
        {
          id: 6,
          title: "OpenAI 首席技术官:GPT-一年半后发布，智能达到“博士”级别",
        },
        {
          id: 7,
          title: "华为下一代编程语言“仓颉”首席架构师揭晓：南京大学冯新宇教授",
        },
        {
          id: 8,
          title: "完美破解半个世纪难题，我国科研团队实现海上风电驱动海水制氢",
        },
        { id: 9, title: "报告：部分  新技术已开始正式应用" },
      ],
    };
  },
  methods: {
    goDetail(id) {
      console.log("通过 params 传参，点击了新闻详情", id);
      // 注意，使用 params 传参，需要使用 name 来跳转，不能用 path
      this.$router.push({ name: "NewsDetail", params: { id } });
    }
  }
}
</script>
  
  <style></style>